<!DOCTYPE html>
<html>
 <head>
  <title>CSSOM Test: CSSStyleDeclaration#setProperty</title>
  <link rel="author" title="Simon Pieters" href="mailto:simonp@opera.com">
  <link rel="help" href="http://dev.w3.org/csswg/cssom/#dom-cssstyledeclaration-setproperty">
  <meta name="flags" content="dom">
  <script src="/resources/testharness.js"></script>
  <script src="/resources/testharnessreport.js"></script>
 </head>
 <body>
  <div id="log"></div>
  <script>
   function newElm() {
     return document.body.appendChild(document.createElement('div'));
   }

   test(function(){
     // step 1
     assert_throws('NoModificationAllowedError', function() {
       getComputedStyle(newElm()).setProperty('color', 'blue');
     });
   }, 'readonly flag set');

   test(function(){
     // step 2
     var elm = newElm();
     elm.style.setProperty('--unknown-color', 'blue');
     assert_equals(elm.style.getPropertyValue('--unknown-color'), '');
   }, 'unsupported property');

   test(function(){
     // step 3
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted');
     assert_equals(elm.style.length, 1);
     var rv = elm.style.setProperty('border-top-style', '');
     assert_equals(elm.style.length, 0);
     assert_equals(rv, undefined);
   }, 'empty value');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', 'important');
     assert_equals(elm.style.getPropertyPriority('border-top-style'), 'important');
   }, 'priority lowercase');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', 'IMPORTANT');
     assert_equals(elm.style.getPropertyPriority('border-top-style'), 'important');
   }, 'priority uppercase');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', '\u0131mportant');
     assert_equals(elm.style.length, 0);
   }, 'priority lowercase dotless i');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', '\u0130mportant');
     assert_equals(elm.style.length, 0);
   }, 'priority uppercase dotted i');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', '');
     assert_equals(elm.style.getPropertyPriority('border-top-style'), '');
   }, 'priority empty string');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', null);
     assert_equals(elm.style.getPropertyPriority('border-top-style'), '');
   }, 'priority null');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', undefined); // stringifies to "undefined" per http://dev.w3.org/2006/webapi/WebIDL/#es-DOMString
     assert_equals(elm.style.length, 0);
   }, 'priority undefined');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', ' important');
     assert_equals(elm.style.length, 0);
   }, 'priority leading space');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', 'important ');
     assert_equals(elm.style.length, 0);
   }, 'priority trailing space');

   test(function(){
     // step 4
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', 'important\u0000');
     assert_equals(elm.style.length, 0);
   }, 'priority trailing U+0000');

   test(function(){
     // step 5
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted !important');
     assert_equals(elm.style.length, 0);
   }, 'invalid value (has !important)');

   test(function(){
     // step 5
     var elm = newElm();
     elm.style.setProperty('border-top-style', '10px');
     assert_equals(elm.style.length, 0);
   }, 'invalid value (length instead of keyword)');

   test(function(){
     // step 5
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted}');
     assert_equals(elm.style.length, 0);
   }, 'invalid value (trailing })');

   test(function(){
     // step 5
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted ');
     assert_equals(elm.style.getPropertyValue('border-top-style'), 'dotted');
   }, 'trailing space in value');

   test(function(){
     // step 5
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted;');
     assert_equals(elm.style.length, 0);
   }, 'trailing ; in value');

   test(function(){
     // step 6
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'dotted', 'important');
     assert_equals(elm.style.getPropertyValue('border-top-style'), 'dotted');
     assert_equals(elm.style.getPropertyPriority('border-top-style'), 'important');
     elm.style.setProperty('border-top-style', 'dotted', '');
     assert_equals(elm.style.getPropertyValue('border-top-style'), 'dotted');
     assert_equals(elm.style.getPropertyPriority('border-top-style'), '');
   }, 'unsetting priority');

   test(function(){
     // step 6
     var elm = newElm();
     elm.style.setProperty('BORDER-TOP-STYLE', 'dotted');
     assert_equals(elm.style.getPropertyValue('border-top-style'), 'dotted');
   }, 'uppercase property');

   test(function(){
     // step 6
     var elm = newElm();
     elm.style.setProperty('border-top-style', 'DOTTED');
     assert_equals(elm.style.getPropertyValue('border-top-style'), 'dotted');
   }, 'uppercase value');
  </script>
 </body>
</html>
